import React, { PureComponent } from "react";
import { Layout } from "antd";

import { Redirect, Switch, Route } from "react-router-dom";
import memoryUtils from "@/utils/memory.js";
import LeftNav from "../../components/Left_Nav";
import MyHeader from "../../components/Header";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons";
import Welcome from "../Welcome";
import Category from "../Categoty";
import Product from "../Product";
import Role from "../Role";
import User from "../User";
import Bar from "../Bar";
import Line from "../Line";
import Pie from "../Pie";
import "./index.less";
const { Header, Sider, Content } = Layout;
export default class Home extends PureComponent {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  render() {
    const user = memoryUtils.user;
    if (!user._id) {
      return <Redirect to="/login" />;
    }
    return (
      <Layout
        id="components-layout-demo-custom-trigger"
        style={{ height: "100%" }}
      >
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <LeftNav></LeftNav>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(
              this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: this.toggle,
              }
            )}
           <MyHeader></MyHeader>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
            }}
          >
            <Switch>
              <Route path="/home" component={Welcome} />{" "}
              <Route path="/category" component={Category} />{" "}
              <Route path="/product" component={Product} />{" "}
              <Route path="/role" component={Role} />{" "}
              <Route path="/user" component={User} />{" "}
              <Route path="/charts/bar" component={Bar} />{" "}
              <Route path="/charts/line" component={Line} />{" "}
              <Route path="/charts/pie" component={Pie} />{" "}
              <Redirect to="/home" />
            </Switch>
          </Content>
        </Layout>
      </Layout>
    );
  }
}
